
<template>
    <section>
        <div id='bar-with-background' class="h-[500px] w-[500px]"></div>
    </section>
</template>

<script lang='ts' setup>
import * as echarts from "echarts";

type Props = {
    dataX: string[],
    dataY: number[],
}

const props = withDefaults(defineProps<Props>(), {
    dataX: () => [],
    dataY: () => [],
});

const initChart = () => {
    const chartDom = document.getElementById('bar-with-background');
    if (!chartDom) return
    const myChart = echarts.init(chartDom);
    let option = null;

    // x
    let dataAxis = props.dataX
    // y
    let data = props.dataY;
    let yMax = Math.max(...props.dataY);
    let dataShadow = [];
    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
    }
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '销售额度：<br/> {b} : {c}￥'
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: false,
                rotate: 60,
                color: '#fff'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 0
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#999'
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#12c2e9' },
                        { offset: 0.5, color: '#c471ed' },
                        { offset: 1, color: '#f64f59' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2980b9' },
                            { offset: 0.7, color: '#6dd5fa' },
                            { offset: 1, color: '#ffffff' }
                        ])
                    }
                },
                data: data
            }
        ]
    };
    // Enable data zoom when user click bar.
    const zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
                dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });

    option && myChart.setOption(option);
}

setTimeout(() => {
    initChart()
}, 500)
</script>

<style lang='scss' scoped></style>